<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			input[type=button]{
				background-color: #ef5b00;
				color: white;
				height: 30px;
				line-height: 30px;
				text-align: center;
				display: block;
				cursor: pointer;
				font-size: 12px;
				width: 300px;
				font-family: "微软雅黑";
				/*去掉边框的关键代码*/
				border: 0 none;
			}
			
			h1,p{
				border: 1px solid red;
				width: 500px;
				height: 50px;
				line-height: 50px;
				font-size: 14px;
				font-weight: normal;
				text-align: center;
				font-family: "微软雅黑";
				
			}
		</style>
	</head>
	<body>
		<h1 class="abc">具有class属性的h1标签</h1>
		<h1>没有任何属性的h1标签</h1>
		
		<p id="apple">具有id属性的p标签</p>
		<p id="xyz">没有任何属性的p标签</p>
		
		<input type="button" onclick="search2();" value="== 具有class属性的h1标签 ==" />
		<br>
		<input type="button" onclick="search3();" value="== 具有id属性的p标签 ==" />
	</body>
	
	<!--Step1:导入jquery-->
	<script type="text/javascript" src="../../../js/jquery-1.4.1.js" ></script>
	<script>
		//查找具有class属性的h1标签
		function search2(){
			var $elements =$("h1[class]");
			
			var domElement = $elements[0];
			console.log(domElement.outerHTML);
			domElement.textContent = domElement.outerHTML;
			
			$elements.css("background-color","#ef5b00").css("color","white");
		}
		
		//查找具有id属性的p标签
		function search3(){
			var $elements =$("p[id='xyz']");
			
			var domElement = $elements[0];
			console.log(domElement.outerHTML);
			domElement.textContent = domElement.outerHTML;
			
			$elements.css("background-color","#ef5b00").css("color","white");
		}
	</script>
</html>
